import React, { memo } from 'react';
import "./ListItem.less"

function ListItem({ item, history, cancel, edit, hideRight }) {
    const touchList = () => {
        history.push("/maintenanceDetail", { no: item.no })
    }

    const getcolor = (status) => {
        if (status == 'WAIT_FINISH') {
            return "WAIT_FINISH"
        } else if (status == 'PROCESSING') {
            return "PROCESSING"
        }
    }

    return (
        <>
            <div className="box" onClick={touchList}>
                <div className="boxTit">
                    <span className="boxTitSize">任务单号:{item.no}</span>
                    {
                        !hideRight ? <div className="t-right">
                            <span onClick={e => cancel(e, item.no)}>取消</span>
                            <span onClick={e => edit(e, item.no)}>修改时间</span>
                        </div> : null
                    }
                </div>
                <div className="boxContent">
                    <div className="bcLine borderB">
                        <span className="bcLineSize">任务状态:</span>
                        <span className={`bcLineSize ${getcolor(item.status)}`}>{item.status == 'WAIT_FINISH' ? '待处理' :
                            item.status == 'PROCESSING' ? '处理中' : '已完成'}</span>
                    </div>
                    <div className="bcLine borderB">
                        <span className="bcLineSize">任务名称:</span>
                        <span className="bcLineSize">{item.strategyNames}</span>
                    </div>
                    <div className="bcLine borderB">
                        <span className="bcLineSize">发起人员:</span>
                        <span className="bcLineSize">{item.createUsername}</span>
                    </div>
                    <div className="bcLine borderB">
                        <span className="bcLineSize">计划时间:</span>
                        <span className="bcLineSize">{item.planInspectionTime}</span>
                    </div>
                    <div className="bcLine borderB">
                        <span className="bcLineSize">班次:</span>
                        <span className="bcLineSize">{item.shiftType}</span>
                    </div>
                </div>
            </div>
        </>
    );
}

export default memo(ListItem);
